<template>
  <div class="flexContainerV">
      <header class="header">
        header：height = 100px
      </header>
      <main class="main">
        conent：height = auto
        <div class="main-body">
          <div class="main-item">1</div>
          <div class="main-item">2</div>
          <div class="main-item">3</div>
          <div class="main-item">4</div>
          <div class="main-item">5</div>
          <div class="main-item">6</div>
          <div class="main-item">7</div>
        </div>
      </main>
      <footer class="footer">
        <div style="color: #fff;">试试改变浏览器窗口大小</div>
      </footer>
  </div>
</template>
<script>
export default {
}
</script>

<style lang="stylus">
   .flexContainerV
     display flex
     height 60vh
     flex-direction column
     .header,.footer
       font-size 18px
       display flex
       justify-content center
       align-items center
     .header
       height 100px
       background #665aa4
     .main
       flex-grow 1
       text-align: center
       background #3dc95d
       .main-body
         display flex
         flex-wrap: wrap
         .main-item
           flex-grow:1
           min-width: 30%
           max-width: 100%
           margin: 15px
           height: 30px
           border: 1px red solid
           background: #ccc
           text-align: center
     .footer
       height 100px
       background: #fc430b
 </style>
